CSS3 animation 动画的流程的简单控制

前端
评论

前言

好吧。。。并没有前言，直接进入正题。CSS3的animation是一个好东西，让页面动画更加纯净，但是之前一扯到动画流程的控制（比如执行完第一个动画后再执行第二个动画在执行某个动作）就有点懵逼

如果是jQuery动画呢，有回调函数（或者.promise().done()），方便滴狠呐！但是animation 呢。。呢。。。呢。。。。呢。。。。。呢。。。。。。

粗粗的想一想吧，貌似给元素加上第一个动画的类后根据第一个动画的执行时间来设置个延迟再加入第二个动画的类也是可以实现的，但是总觉得这样不干净，而且setTimeout其实也不是那么的可控，

然后塔哒，就遇到这篇文章你若触发，我就处理，讲的是JS事件响应的，对， 事！件！响！应！。如果动画结束时能有能触发某个事件，JS再监听响应一下，这不就完事儿了吗？

诶，万能的JS还真有

CSS动画事件 animationstart，animationend和animationiteration

看着三个事件名字就知道，这三个事件分别对应动画开始前，动画结束后，动画进行中，不废话了，直接上个demo

实现了个简单的删除动画，第一步让元素出视野，第二步让元素height和margin,paddind等都塌陷，最后直接移除元素

有几个自己觉得要注意写下注释

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
on('.m1', 'animationend', function() {
  // this.classList获取的是一个DOMtokenList并不是真的数组所以要转换一下
  var classlist = Array.prototype.slice.apply(this.classList);
  // 因为有两个动画，所以要判定是哪一个动画结束了来执行下一阶段
  if (classlist.indexOf('dnone') == -1) {
    this.classList.add('dnone')
  } else {
    setTimeout(function() {
      this.parentNode.removeChild(this)
    }, 1000)
  }
})
on('button', 'click', function() {
  select('.m1').classList.toggle('leave');
})
function select(selector) {
  return document.querySelector(selector)
}
function on(selector, eventName, cb) {
  select(selector).addEventListener(eventName, cb);
}

这么一看其实也是很简单的哈哈,顺带一提起时transition过渡动画也有个事件transitionend。

最后，兼容性

  1. CSS3动画相关属性的兼容性可以看这里
  2. animation事件，一般只需加两种前缀就可以了
    webkit前缀：webkitAnimationStart
    MS前缀：MSAnimationStart 
1
2
3
4
5
6
7
8
9
10
11
12
Object.prototype.perfixOn = function (eventName, cb) {
    var perfix = ['webkit', 'MS', '']
	for (var i = perfix.length - 1; i >= 0; i--) {
		if (perfix[i] != '') {
            eventName.replace(/^(\w)/, function ($1) {
                return $1.toUpperCase()
            })
        }
		this.addEventListener(perfix[i] + eventName, cb, false);
	}
}
Obj.perfixOn('animationend', cb)